import React, { Component } from 'react';
import { connect } from 'dva';
import { Row,Col,Modal,Table,Button } from 'antd';
import styles from './Analysis.less';
import ExportJsonExcel from 'js-export-excel';//导出
/* eslint react/no-danger:0 */
@connect(({ statisticchart, loading }) => ({
  statisticchart,
  loading: loading.effects['statisticchart/fetch'],
}))
class OrganList extends Component {
  state = {
    modalByStaffBaseInfo: false,
    tableListDataByOrganDetail: [
      {unit_superior_unit:"乌兰察布市公安局", unit_affiliation:"省辖市", type_of_unit:"一级公安机关", unit_level:"县、处级", administrative_area:"内蒙古呼和浩特市"},
      {unit_superior_unit:"呼和浩特市公安局", unit_affiliation:"省辖市", type_of_unit:"公安行政机关", unit_level:"县、处级", administrative_area:"内蒙古呼和浩特市"},
      {unit_superior_unit:"包头市公安局", unit_affiliation:"省辖市", type_of_unit:"一级公安机关", unit_level:"县、处级", administrative_area:"内蒙古呼和浩特市"},
      {unit_superior_unit:"乌海市公安局", unit_affiliation:"省辖市", type_of_unit:"一级公安机关", unit_level:"县、处级", administrative_area:"内蒙古呼和浩特市"},
      {unit_superior_unit:"赤峰市公安局", unit_affiliation:"省辖市", type_of_unit:"一级公安机关", unit_level:"县、处级", administrative_area:"内蒙古呼和浩特市"},
      {unit_superior_unit:"赤峰市公安局", unit_affiliation:"省辖市", type_of_unit:"一级公安机关", unit_level:"县、处级", administrative_area:"内蒙古乌兰察布市"},
      {unit_superior_unit:"赤峰市公安局", unit_affiliation:"省辖市", type_of_unit:"一级公安机关", unit_level:"县、处级", administrative_area:"内蒙古乌兰察布市"},
    ],
    tableListDataByOrganTotal: [
      {ordernum: "1",type_of_unit:"一级公安机关", unit_level:"市级", administrative_area:"内蒙古呼和浩特市",total: 10},
      {ordernum: "2",type_of_unit:"公安行政机关", unit_level:"县、处级", administrative_area:"北京市",total: 18},
      {ordernum: "3",type_of_unit:"一级公安机关", unit_level:"市级", administrative_area:"天津市",total: 20},
      {ordernum: "4",type_of_unit:"二级公安机关", unit_level:"县、处级", administrative_area:"上海市",total: 8},
      {ordernum: "5",type_of_unit:"二级公安机关", unit_level:"县、处级", administrative_area:"石家庄",total: 12},
      {ordernum: "6",type_of_unit:"一级公安机关", unit_level:"市级", administrative_area:"重庆",total: 10},
    ]
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'statisticchart/get_proorgan_list',
    });
  }

  columnsByOrganTotal = [
      {
        title: '序号',
        dataIndex: 'ordernum',
        key: 'ordernum',
      },
      {
        title: '单位所在政区',
        dataIndex: 'administrative_area',
        key: 'administrative_area',
      },  {
        title: '单位性质类别',
        dataIndex: 'type_of_unit',
        key: 'type_of_unit',
      }, {
        title: '单位级别',
        dataIndex: 'unit_level',
        key: 'unit_level',
      }, {
        title: '总机构数',
        dataIndex: 'total',
        key: 'total',
      }
  ];

  columnsByOrgan = [
        {
          title: '单位名称',
	        dataIndex: 'unit_superior_unit',
	        key: 'unit_superior_unit',
        },  {
	        title: '单位隶属关系',
	        dataIndex: 'unit_affiliation',
	        key: 'unit_affiliation',
        }, 	{
	        title: '单位性质类别',
	        dataIndex: 'type_of_unit',
	        key: 'type_of_unit',
        },  {
	        title: '单位级别',
	        dataIndex: 'unit_level',
	        key: 'unit_level',
        },  {
	        title: '单位所在政区',
	        dataIndex: 'administrative_area',
	        key: 'administrative_area',
        }
	];

  //导出excel
  downloadExl = () => {
    const {
      statisticchart: {
        organDetialData
      },
    } = this.props;
    	var option={};
  	  option.fileName = '机构统计信息'
  	  option.datas=[
  	    {
  	      sheetData:organDetialData.list || [],
  	      sheetName:'机构统计信息',
  	      sheetHeader:['单位名称','单位隶属关系','单位性质类别','单位级别','单位所在政区'],
  	      columnWidths: [10,10,10,10,10],
  	      columnHeights: [10,10,10,10,10]
  	    }
  	  ];

  	  var toExcel = new ExportJsonExcel(option);
  	  toExcel.saveExcel();
  }

  //机构信息弹窗
	handleModalByOrgan = flag => {
		this.setState({
			modalByOrgan: !!flag,
		});
	};

  render() {
    const {
      statisticchart: {
      	organListData,
        organDetialData
      },
      modalOrganVisible,
      handleOrganModalVisible
    } = this.props;
    const { modalByOrgan } = this.state;
    return (
    <div>
     	<Modal
			width={800}
			centered
			destroyOnClose
			title="机构详情"
			visible={modalByOrgan}
			onOk={()=> this.handleModalByOrgan()}
			onCancel={()=> this.handleModalByOrgan()}
			>
      <Button type="primary" icon="download" onClick={this.downloadExl} style={{float: 'right',zIndex: 1000,marginBottom: '10px',marginTop: '-14px'}}>
      导出
      </Button>
			<Table columns={this.columnsByOrgan} dataSource={organDetialData?organDetialData.list: []}/>
		</Modal>
    <Modal
    	width={800}
    	centered
    	destroyOnClose
    	title="机构统计表"
    	visible={modalOrganVisible}
    	onOk={()=> handleOrganModalVisible()}
    	onCancel={()=> handleOrganModalVisible()}
    	>
    	<Table
        columns={this.columnsByOrganTotal}
        dataSource={organListData?organListData.list: []}
        rowClassName={(record, index) => {
          return styles.statisticListStyle;
        }}
        onRow={record => {
          return {
            onClick: event => {
              handleOrganModalVisible();
              const { dispatch } = this.props;
              dispatch({
                type: 'statisticchart/get_proorgan_detail',
              });
              this.handleModalByOrgan(true)
            }, // 点击行
          };
        }}
      />
    </Modal>
    </div>
    );
  }
}

export default OrganList;
